<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bigBox {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: relative;
        }

        .box {
            width: 50px;
            height: 50px;
            background-color: skyblue;
            margin: auto;
            /* margin-top: 75px;  */
            /* position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%); */
        }
    </style>
</head>

<body>
    <div class="bigBox">
        <div class="box"></div>
    </div>
    <!-- <img src="./images//1.jpg" alt=""> -->
</body>
<script>

    const downLoadImg = (imgsrc, name) => {
        var image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function () {
            console.log(66666)
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            var context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

            var a = document.createElement("a"); // 生成一个a元素
            var event = new MouseEvent("click"); // 创建一个单击事件
            a.download = name || "photo"; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
        };
        image.src = imgsrc;
    }

    downLoadImg("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656995235&t=9efeba11f6c1b135a59f233d8d071161    ", "图片")

</script>

</html>